<template>
    <main class="container">
      <div class="background">
        <div class="stars">
          <div v-for="n in 200" :key="n" class="star"></div>
        </div>
        <div class="shooting-stars">
          <div v-for="n in 8" :key="n" class="shooting-star"></div>
        </div>
        <div class="glow"></div>
        <div class="waves">
          <div class="wave wave1"></div>
          <div class="wave wave2"></div>
          <div class="wave wave3"></div>
        </div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="shape"></div>
        <div class="lines"></div>
      </div>
      <div class="login-wrapper animate__animated animate__fadeIn">
        <div class="login-header">
          <h1 class="login-title">欢迎登录</h1>
          <p class="login-subtitle">请输入您的账号和密码</p>
        </div>
        <el-form class="login-form" ref="formRef" :model="loginFrom">
          <el-form-item prop="username">
            <el-input :prefix-icon="User" v-model="loginFrom.username" placeholder="请输入用户名" size="large" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              @keydown.enter="submitForm(formRef)"
              :prefix-icon="Lock"
              v-model="loginFrom.password"
              placeholder="请输入密码"
              show-password
              size="large"
            />
          </el-form-item>
          <el-form-item prop="checked">
            <div class="login-options">
              <el-checkbox v-model="checked" label="记住我" size="large" />
              <el-button
                link
                type="info"
                @click="
                  () => {
                    loginFrom.password = '123456';
                    loginFrom.username = 'admin';
                  }
                "
              >
                忘记密码？
              </el-button>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" class="login-button" type="primary" @click="submitForm(formRef)" size="large"> 登 录 </el-button>
          </el-form-item>
        </el-form>
      </div>
    </main>
  </template>
  
  <script setup name="login">
    import { EncryptUtil } from '@/utils/encrypt-util.js';
    import { useMenuStore } from '@/store/menu-store.js';
    import { useUserStore } from '@/store/user-store.js';

    import router from '@/router';
    import { User, Lock } from '@element-plus/icons-vue';

  
    const formRef = ref();
    const loading = ref(false);
    const checked = ref();
  
    // 引入用户store
    const useUser = useUserStore();
  
    const loginFrom = reactive({
      username: '',
      password: '',
    });
  
    const submitForm = (formEl) => {
      if (!formEl) return;
      formEl.validate(async (valid) => {
        if (valid) {
          loading.value = true;
          const password = await EncryptUtil.encrypt(loginFrom.password);
  
          // 登录
          await useUser.login({
            ...loginFrom,
            password,
          });
  
          // 获取路由
          await useMenuStore().fetchRoutes(router);
  
          // 路由跳转
          router.replace('/');
          loading.value = false;
        }
      });
    };
  </script>
  
  <style lang="scss" scoped>
  @use "sass:math";
    .container {
      height: 100vh;
      width: 100vw;
      background: linear-gradient(125deg, #0f1729 0%, #1a2236 50%, #0f1729 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      position: relative;
    }
  
    .background {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 1;
    }
  
    // 星星效果
    .stars {
      position: absolute;
      width: 100%;
      height: 100%;
  
      .star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: #fff;
        border-radius: 50%;
        opacity: 0;
        animation: twinkle var(--duration, 4s) infinite;
        animation-delay: var(--delay, 0s);
  
        @for $i from 1 through 200 {
          &:nth-child(#{$i}) {
            --x: #{math.random(100)}vw;
            --y: #{math.random(100)}vh;
            --duration: #{2 + math.random(4)}s;
            --delay: #{math.random(4)}s;
            transform: translate(var(--x), var(--y));
          }
        }
      }
    }
  
    // 流星效果
    .shooting-stars {
      position: absolute;
      width: 100%;
      height: 100%;
  
      .shooting-star {
        position: absolute;
        width: 100px;
        height: 1px;
        opacity: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
        animation: shooting-star 4s infinite;
  
        @for $i from 1 through 8 {
          &:nth-child(#{$i}) {
            --top: #{math.random(50)}vh;
            --delay: #{math.random(4)}s;
            top: var(--top);
            animation-delay: var(--delay);
          }
        }
      }
    }
  
    // 波浪效果
    .waves {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0.3;
  
      .wave {
        position: absolute;
        bottom: 0;
        width: 200%;
        height: 100%;
        background: transparent;
  
        &::before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(108, 133, 255, 0.2), transparent);
          transform-origin: bottom;
        }
      }
  
      .wave1 {
        animation: wave 8s linear infinite;
        &::before {
          animation: wave-gradient 8s linear infinite;
        }
      }
  
      .wave2 {
        animation: wave 10s linear infinite;
        &::before {
          animation: wave-gradient 10s linear infinite;
        }
      }
  
      .wave3 {
        animation: wave 12s linear infinite;
        &::before {
          animation: wave-gradient 12s linear infinite;
        }
      }
    }
  
    // 发光效果
    .glow {
      position: absolute;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at 50% 50%, rgba(108, 133, 255, 0.1) 0%, rgba(108, 133, 255, 0.05) 30%, transparent 70%);
      animation: glow 8s ease-in-out infinite alternate;
    }
  
    @keyframes twinkle {
      0%,
      100% {
        opacity: 0;
        transform: translate(var(--x), var(--y)) scale(0.3);
      }
      50% {
        opacity: 0.8;
        transform: translate(var(--x), var(--y)) scale(1);
      }
    }
  
    @keyframes shooting-star {
      0% {
        opacity: 0;
        transform: translateX(-100%) translateY(0);
      }
      10%,
      20% {
        opacity: 1;
      }
      100% {
        opacity: 0;
        transform: translateX(200%) translateY(100px);
      }
    }
  
    @keyframes wave {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
  
    @keyframes wave-gradient {
      0%,
      100% {
        transform: scaleY(0.5);
      }
      50% {
        transform: scaleY(1);
      }
    }
  
    @keyframes glow {
      0% {
        opacity: 0.5;
        transform: scale(0.95);
      }
      100% {
        opacity: 0.8;
        transform: scale(1.05);
      }
    }
  
    .login-wrapper {
      position: relative;
      z-index: 2;
      width: 520px;
      padding: 50px;
      background: rgba(255, 255, 255, 0.08);
      box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.25),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(25px);
      border-radius: 30px;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  
      &:hover {
        transform: translateY(-8px);
        box-shadow:
          0 20px 50px rgba(0, 0, 0, 0.35),
          inset 0 0 0 1px rgba(255, 255, 255, 0.2);
      }
  
      &::before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        background: linear-gradient(
          45deg,
          transparent 0%,
          rgba(255, 255, 255, 0.12) 45%,
          rgba(255, 255, 255, 0.25) 50%,
          rgba(255, 255, 255, 0.12) 55%,
          transparent 100%
        );
        border-radius: 30px;
        mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        animation: border-light 5s linear infinite;
      }
    }
  
    .login-header {
      text-align: center;
      margin-bottom: 40px;
    }
  
    .login-title {
      color: #fff;
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 12px;
      letter-spacing: 1.5px;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    }
  
    .login-subtitle {
      color: rgba(255, 255, 255, 0.7);
      font-size: 16px;
      font-weight: 300;
      letter-spacing: 0.5px;
    }
  
    .login-form {
      .el-form-item {
        margin-bottom: 28px;
      }
  
      :deep(.el-input) {
        .el-input__wrapper {
          background: rgba(255, 255, 255, 0.08);
          box-shadow: none;
          border: 1px solid rgba(255, 255, 255, 0.15);
          border-radius: 12px;
          padding: 6px 15px;
          transition: all 0.4s ease;
          height: 48px;
  
          input {
            color: #fff;
            font-size: 15px;
            &::placeholder {
              color: rgba(255, 255, 255, 0.5);
            }
          }
  
          &:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
          }
  
          &.is-focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.4);
            box-shadow: 0 0 0 3px rgba(108, 133, 255, 0.25);
            transform: translateY(-2px);
          }
        }
  
        .el-input__prefix {
          font-size: 20px;
          color: rgba(255, 255, 255, 0.7);
          margin-right: 5px;
        }
      }
    }
  
    .login-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
  
      :deep(.el-checkbox) {
        .el-checkbox__label {
          color: rgba(255, 255, 255, 0.9);
          font-size: 15px;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner {
          background-color: #6c85ff;
          border-color: #6c85ff;
          box-shadow: 0 0 0 2px rgba(108, 133, 255, 0.2);
        }
        .el-checkbox__inner:hover {
          border-color: #6c85ff;
        }
      }
  
      .el-button {
        font-size: 15px;
        color: rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease;
  
        &:hover {
          color: #6c85ff;
          transform: translateY(-2px);
        }
      }
    }
  
    .login-button {
      width: 100%;
      height: 48px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 12px;
      margin-top: 15px;
      background: linear-gradient(135deg, #6c85ff, #8c9eff);
      border: none;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      letter-spacing: 0.5px;
  
      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(108, 133, 255, 0.5);
        background: linear-gradient(135deg, #8c9eff, #a4b0ff);
      }
  
      &:active {
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(108, 133, 255, 0.4);
      }
  
      &:disabled {
        background: linear-gradient(135deg, #6c85ff88, #8c9eff88);
        box-shadow: none;
      }
    }
  </style>
  @/store/menu@/store/menu.js@/store/user@/store/menu-store.js@/store/menu-store.js@/store/user-store.js@/utils/encrypt-util